JavaScript Hide Button

In today鈥檚 post, we鈥檒l learn about hiding buttons in JavaScript.

The CSS property visibility shows or hides an element without affecting the layout of a document.

Syntax:

The element box is invisible but affects the layout as usual. The element鈥檚 descendants are visible if their visibility is set to visible.

Using a hidden visibility value for an element removes it from the accessibility tree. As a result, the screen reader technology no longer announces the element and all of its children.

Visibility values are toggled between visible and invisible. Therefore, one of the start or end values must be visible, or no interpolation can be performed.

The value is interpolated as a discrete step, assigning time-function values between 0 and 1 to the visible endpoint and other time-function values to the nearest endpoint.

You can find more information about the property in the Visibility documentation.

Let鈥檚 take an example of showing and hiding the button in JavaScript using the visibility property.

We have defined two buttons in the example above. The first button will be shown and hidden based on the toggle button value.

The second button will toggle the visibility of the previous button.

Run the code snippet above in any browser that supports JavaScript; it will show the below result.

Output:

Hide Button:

The CSS display property determines whether an element is treated as a block or inline element and the layout used for its child elements, e.g., B. Flow, Grid, or Flex layout.

Syntax:

The Display property specifies an element鈥檚 interior and exterior display types. The external type determines an element鈥檚 participation in the flow layout; the inner type sets the child鈥檚 design.

Some display values are fully defined in their specifications. For example, what happens when the display: flex is declared is defined in the CSS flexbox model specification.

You can find more information about the property in the Display documentation.

Let鈥檚 take an example of showing and hiding the button in JavaScript using the display property.

We have defined two buttons in the example above. The first button will be shown and hidden based on the toggle button value.

The second button will toggle the display property of the previous button.

Run the code snippet above in any browser that supports JavaScript; it will show the below result.

Output:

Demo Here